{% extends 'base.html' %}

{% block css%}
<style type="text/css">
    input[type="checkbox"]:after {
    width: 0px;
    height: 0px;
}
</style>
{% endblock %}

{% block body%} 
<h3>Module LPMode</h3>
<div class="row">

    <div class="col-md-3">
        <table class="table table-hover table-condensed">

                {% for port in port_g1 %}
                  <tr>
                      <td  width="75%" style="font-size: 14px">
                        Port{{ port }}
                      </td>
                      <td>
                          <input  name = "cb_mod_lpmode" class="my_checkbox" id="cb_mod_lpmode_Port{{ port }}" type="checkbox">
                      </td>
                  </tr>
                  {% endfor %}
  
          </table>
    </div>

    <div class="col-md-3">
        <table class="table table-hover table-condensed">

                {% for port in port_g2 %}
                  <tr>
                      <td  width="75%" style="font-size: 14px">
                        Port{{ port }}
                      </td>
                      <td>
                          <input  name = "cb_mod_lpmode" class="my_checkbox" id="cb_mod_lpmode_Port{{ port }}" type="checkbox">
                      </td>
                  </tr>
                  {% endfor %}
  
          </table>
    </div>

    <div class="col-md-3">
        <table class="table table-hover table-condensed">

                {% for port in port_g3 %}
                  <tr>
                      <td  width="75%" style="font-size: 14px">
                        Port{{ port }}
                      </td>
                      <td>
                          <input  name = "cb_mod_lpmode" class="my_checkbox" id="cb_mod_lpmode_Port{{ port }}" type="checkbox" />
                      </td>
                  </tr>
                  {% endfor %}
  
          </table>
    </div>


    <div class="col-md-3">
        <table class="table table-hover table-condensed">

                {% for port in port_g4 %}
                  <tr>
                      <td  width="75%" style="font-size: 14px">
                        Port{{ port }}
                      </td>
                      <td>
                          <input  name = "cb_mod_lpmode" class="my_checkbox" id="cb_mod_lpmode_Port{{ port }}" type="checkbox">
                      </td>
                  </tr>
                  {% endfor %}
          </table>
          <div class="pull-right">
  
            <button class="btn btn-success" id="btn_mod_lpmode_get">Get</button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-danger" id="btn_mod_lpmode_set">Set</button>
           
          </div>
    </div>


  </div>
{% endblock %}

{% block js%} 
{{ super() }}
<script type="text/javascript">


    $(document).ready(function(){

        $("#btn_get_mod_pin_1_loading").hide();

        function btn_mod_lpmode_get()
        {
            url = "/api/btn_mod_lpmode_get"
            $.get(url, function(data, status){
                console.log(data);
                d = JSON.parse(data);
                $.each(d,function(index,value){
                    if(value == 1)
                        $("#cb_mod_lpmode_" + index).prop("checked", true);
                    else
                        $("#cb_mod_lpmode_" + index).prop("checked", false);						
                });
            });
        }

        function btn_mod_lpmode_set()
        {
            $.post("api/mod_lpmode_set",
            {
                Port1:$("#cb_mod_lpmode_"+ "Port1").is(':checked')?1:0,
                Port2:$("#cb_mod_lpmode_"+ "Port2").is(':checked')?1:0,
                Port3:$("#cb_mod_lpmode_"+ "Port3").is(':checked')?1:0,
                Port4:$("#cb_mod_lpmode_"+ "Port4").is(':checked')?1:0,
                Port5:$("#cb_mod_lpmode_"+ "Port5").is(':checked')?1:0,
                Port6:$("#cb_mod_lpmode_"+ "Port6").is(':checked')?1:0,
                Port7:$("#cb_mod_lpmode_"+ "Port7").is(':checked')?1:0,
                Port8:$("#cb_mod_lpmode_"+ "Port8").is(':checked')?1:0,
                Port9:$("#cb_mod_lpmode_"+ "Port9").is(':checked')?1:0,
                Port10:$("#cb_mod_lpmode_"+ "Port10").is(':checked')?1:0,

                Port11:$("#cb_mod_lpmode_"+ "Port11").is(':checked')?1:0,
                Port12:$("#cb_mod_lpmode_"+ "Port12").is(':checked')?1:0,
                Port13:$("#cb_mod_lpmode_"+ "Port13").is(':checked')?1:0,
                Port14:$("#cb_mod_lpmode_"+ "Port14").is(':checked')?1:0,
                Port15:$("#cb_mod_lpmode_"+ "Port15").is(':checked')?1:0,
                Port16:$("#cb_mod_lpmode_"+ "Port16").is(':checked')?1:0,
                Port17:$("#cb_mod_lpmode_"+ "Port17").is(':checked')?1:0,
                Port18:$("#cb_mod_lpmode_"+ "Port18").is(':checked')?1:0,
                Port19:$("#cb_mod_lpmode_"+ "Port19").is(':checked')?1:0,
                Port20:$("#cb_mod_lpmode_"+ "Port20").is(':checked')?1:0,

                Port21:$("#cb_mod_lpmode_"+ "Port21").is(':checked')?1:0,
                Port22:$("#cb_mod_lpmode_"+ "Port22").is(':checked')?1:0,
                Port23:$("#cb_mod_lpmode_"+ "Port23").is(':checked')?1:0,
                Port24:$("#cb_mod_lpmode_"+ "Port24").is(':checked')?1:0,
                Port25:$("#cb_mod_lpmode_"+ "Port25").is(':checked')?1:0,
                Port26:$("#cb_mod_lpmode_"+ "Port26").is(':checked')?1:0,
                Port27:$("#cb_mod_lpmode_"+ "Port27").is(':checked')?1:0,
                Port28:$("#cb_mod_lpmode_"+ "Port28").is(':checked')?1:0,
                Port29:$("#cb_mod_lpmode_"+ "Port29").is(':checked')?1:0,
                Port30:$("#cb_mod_lpmode_"+ "Port30").is(':checked')?1:0,

                Port31:$("#cb_mod_lpmode_"+ "Port31").is(':checked')?1:0,
                Port32:$("#cb_mod_lpmode_"+ "Port32").is(':checked')?1:0,

            },
            function(data,status){
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);

                // btn_mod_lpmode_get();
            });

        }



        $("#btn_mod_lpmode_get").click(function () {
            // $("#btn_get_mod_pin_1_loading").show();
            btn_mod_lpmode_get();
        });

        $("#btn_mod_lpmode_set").click(function () {
            // $("#btn_get_mod_pin_1_loading").show();
            btn_mod_lpmode_set();
        });
        

    });

</script>
{% endblock %}